<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"  id="navBar" > </van-nav-bar> -->
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top"
                    :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="navBarTitle" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
                </view>
                <view class="main-container" ref="container">
                    <view class="sur_box_bg">
                        <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/homeAppliances_bg.png"
                            alt=""> -->
                        <view class="sur_box"></view>
                    </view>
                    <view class="card_bg">
                        <view class="pageTitle"  @tap="showNodePopup">{{title}} <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/blackTriangleIcon.png" alt=""></view>
                        <view class="serviceStatusTime">服务于{{serviceInfo.realEndTime}}完成</view>
                        <view class="service-desc-card">
                            <view class="judgeTips"> {{serviceInfo.completeRemarks}} </view>
                            <view class="uploadPic">
                                <view class="preview-list">
                                    <view v-for="(file, fIndex) in serviceInfo.imageList" :key="fIndex"
                                        class="preview-item">
                                        <img :src="file" class="preview-image"
                                            @click="previewImage(file.localPath || file)" mode="widthFix" >
                                        <!-- <view class="delete-icon" @click="deleteImage(fIndex)">×</view> -->
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="userCommentEmpty" v-if="!userJudgeData">  用户暂无评价 </view>
                        <view class="userComment" v-else>
                            <view class="box_title">用户评价</view>
                            <view class="userJudgeBox">
                                <view class="user_judge_top">
                                    <view class="user_info">
                                        <view class="user_img user_info_left"> <img :src="userJudgeData.wxUserInfo.avatarUrl ? userJudgeData.wxUserInfo.avatarUrl  :defaultAvatarUrl " alt="" mode="widthFix">
                                        </view>
                                        <view class="user_info_right">
                                            <view class="user_nicheng"> {{ userJudgeData.wxUserInfo.nickName }} </view>
                                            <view class="icon">
                                                <van-rate :value="mpComment.rating" readonly size="20" color="#FF9C00" void-icon="star" void-color="#eee" />
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <!-- <view class="user_judge_date">{{ mpComment.publishTime}} </view> -->

                                <view class="judge_item b12 t12">{{mpComment.content }}</view>
                                <view class="judge_img"
                                     v-if="mpComment.imageUrls && mpComment.commentImages &&  mpComment.commentImages.length > 0" >
                                    <view class="judge_img_item" v-for="(i, j) in mpComment.commentImages" :key="j">
                                        <img :src="i" alt="" mode="widthFix" />
                                    </view>
                                </view>
                                <view class="user_judge_date">{{ mpComment.publishTime}} </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="bottom">
            <!-- <van-button type="primary" class="button" @click="toRegisterAct">核销码服务</van-button> -->
            <!-- <van-button type="default" class="checkBtn" @tap="toRegisterAct">扫码服务</van-button> -->
            <!-- <button plain type="default" class="button" @tap="showEnterCode">核销码服务</button> -->
            <!-- <button plain class="checkBtn" @tap="toSubmitOver">确认完成</button> -->
        </view>
        <!-- <view class="goodsAction">
            <van-goods-action id="goodact">
                <van-goods-action-button color="#FF6203" text="立即报名" type="warning" @click="toRegisterAct"  v-if="activityDetail.joinPeopleNum && activityDetail.joinPeopleNum< activityDetail.peopleNum"/>
                <van-goods-action-button color="#D4D4D4" text="报名已满" type="warning" @click="toRegisterAct"  v-if="activityDetail.joinPeopleNum===activityDetail.peopleNum"/>
            </van-goods-action>
        </view> -->
        <!-- 服务节点 -->
         <serviceNode :show="showNode" @closeNodePopup="closeNodePopup" @startService="startService" :reservationId="reservationId"></serviceNode>
        <!-- 核销码服务 -->
        <!-- <enterVerificationCode :show="showCode" @closeEnterlPopup="closeEnterlPopup" @startService="startService"></enterVerificationCode> -->
    </view>
</template>

<script>

import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {reservationInfoApi} from '@/api/staff'
import { commentInfoApi } from '@/api/service' // 用户的服务评价
import Toast from '@/wxcomponents/vant/toast/toast'
// import enterVerificationCode from '@/mycomponents/serviceModule/enterVerificationCode.vue'
import serviceNode from '@/mycomponents/serviceModule/serviceNode.vue'


export default {
    components: { 
        // enterVerificationCode

        serviceNode
    },
    data () {
        return {
            navBarTitle:'服务已结束',
            menuButtonWidth:'',  //页面右侧按钮的宽度
            shareRight:'',  //图标右侧距离
            latitude: 35.101902,
            longitude: 111.071467,
            title: '服务已结束', // 页面中服务标题
            serviceStatusTime:'2月19日14:00', // 服务状态时间
            serviceStatus:'开始服务',  //服务状态
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,
            reservationInfo:{},
            serviceInfo:{
                content:'对用户进行深度保洁3小时已服务完成！',
                imageList:[
                    {
                        url:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    },
                    {
                        url:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    },
                    {
                        url:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                    }
                ]
            }, //服务工作人员的服务描述
            serviceComment: null, //服务评价
            userJudgeData: {
                // // userImg: require('../../static/judge/user.png'),
                // avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                // nickname: 'a***aw',
                // rating:5,
                // createTime: '2024-04-11 20:30',
                // comment: '阿姨厨艺精湛，择菜、洗菜都很利索，做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净aaaaaaaaa做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净',
                // pics: [
                //     'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
                //     'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
                // ],
                // zhuipingList: [{
                //     followUpTime: '2024-04-12 10:30',
                //     followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                //     followUpPics: [
                //         'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     ],
                // }],
                // followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
                // followUpPics: [
                //     'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png'
                // ],
                // followUpIsReply: null,
                // followUpReplyContent: null,
                // followUpReplyTime: null,
                // followUpTime: '2024-04-12 10:30',
            }, //用户对服务的评价
            // userJudgeList: [ //用户评价列表
            //     {
            //         userJudge: {
            //             // userImg: require('../../static/judge/user.png'),
            //             avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
            //             nickname: 'a***aw',
            //             createTime: '2024-04-11 20:30',
            //             comment: '阿姨厨艺精湛，择菜、洗菜都很利索，做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净aaaaaaaaa做的饭菜色香味俱全，做晚饭还把厨房收拾的很干净',
            //             pics: [
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
            //             ],
            //             zhuipingList: [{
            //                 followUpTime: '2024-04-12 10:30',
            //                 followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
            //                 followUpPics: [
            //                     'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
            //                 ],
            //             }],
            //             followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
            //             followUpPics: [
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png'
            //             ],
            //             followUpIsReply: null,
            //             followUpReplyContent: null,
            //             followUpReplyTime: null,
            //             followUpTime: '2024-04-12 10:30',
            //         },
            //         productReplyLikesNum: 0,
            //         replyLikes: false,
            //     }, 
            //     {
            //         userJudge: {
            //             // userImg: require('../../static/judge/user.png'),
            //             avatar: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
            //             nickname: "A***rew",
            //             createTime: "2023-10-02",
            //             comment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
            //             pics: [
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png',
            //                 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png'
            //             ],
            //             zhuipingList: [{
            //                 followUpTime: '2023-04-12 20:30',
            //                 followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间,配料有当归 枸杞 黄芪 红枣等，真材实料～吃了一段时间',
            //                 followUpPics: [
            //                     // { imgurl: require('../../static/shangcheng/judge02.png') },
            //                 ]
            //             }],
            //             followUpComment: '配料有当归 枸杞 黄芪 红枣等，真材实料～',
            //             followUpIsReply: null,
            //             followUpPics: null,
            //             followUpReplyContent: null,
            //             followUpReplyTime: null,
            //             followUpTime: '2024-02-01 20:30',
            //         },
            //         productReplyLikesNum: 0,
            //         replyLikes: false,
            //     }

            // ],
            defaultAvatarUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png",
            params:{},
            activitiesId:undefined,  //活动ID
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            showNode:false, //是否显示服务节点
            popupParams:{},
            reservationId:undefined, //预约ID
            serviceStatus:'', //服务状态
            commentId:undefined, //用户对本次服务评价id
            mpComment:{}, //用户对本次服务评价
            replyData:{}, //对本次服务评价的回复
        }
    },

    computed: {

    },
    onLoad (data) {
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮宽度：', menuButtonInfo.width);
        console.log('胶囊按钮高度：', menuButtonInfo.height);
        this.menuButtonWidth = menuButtonInfo.width
        this.shareRight='padding-right:'+ ( this.menuButtonWidth + 5 ) +'px' + '!important'

        // 取到路由携带的参数
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params) || '{}')
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.serviceStatus = this.params.serviceStatus
            // this.fromEarnPoints = this.params.fromEarnPoints || false
            this.reservationId = this.params.reservationId || undefined
            this.popupParams.reservationId = this.params.reservationId || undefined
            this.title = this.params.serviceStatus == 'canceled' ? '服务取消' : '服务已结束'
        }
    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    onShow(){
        this.getReservationInfo()
    },
    methods: {
        // 顶部导航栏返回
        onClickLeft () {
            uni.navigateBack({
                delta: 1
            })
        },
        handleScroll (e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
                // this.scrollMT = 'margin-top: 486px'
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 显示jiedian弹窗
        showNodePopup () {
            this.showNode = true
            console.log('服务节点')
        },
        // 关闭节点弹窗
        closeNodePopup () {
            this.showNode = false
            console.log('服务节点')
        },
        formatDateSE(timeStr) {
            if (timeStr) {
                // const timeA=timeStr.replace(/-/g, '/')
                const timeStrss = timeStr.replace('+0000', '');
                const date = new Date(timeStrss);
                const year = date.getFullYear();
                const month = ("0" + (date.getMonth() + 1)).slice(-2);
                const day = ("0" + date.getDate()).slice(-2);
                const weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()];
                const hours = ("0" + date.getHours()).slice(-2);
                const minutes = ("0" + date.getMinutes()).slice(-2);
                const formatDate = `${year}.${month}.${day}  ${hours}:${minutes}`
                return formatDate;
            } else {
                console.error('传入的startTime格式不正确，期望为合法数字类型的时间戳');
                return ''
            }
        },
        previewImage(currentUrl,index) {
            console.log('预览图片:', currentUrl)
            uni.previewImage({
                current: currentUrl,
                urls: this.serviceInfo.imageList.map(file => file),
                fail: (err) => {
                    console.error('预览失败:', err);
                }
            });
        },
        //服务详情
        getReservationInfo(){
            reservationInfoApi({reservationId:this.reservationId}).then(res=>{
                console.log(res)
                if(res.code===200){
                    this.serviceInfo = res.data
                    this.latitude = parseFloat(res.data.lat)
                    this.longitude = parseFloat(res.data.lng)
                    this.popupParams.versionNo = res.data.versionNo
                    this.serviceInfo.imageList = res.data.completeAttachment.split(',')
                    console.log(this.serviceInfo.imageList,this.serviceInfo)
                    this.commentId = res.data?.replayId || undefined
                    if(this.commentId){
                        this.getCommentInfo()
                    }else{
                        this.userJudgeData = null
                    }
                }
            })
        },
         // 服务评价信息
         getCommentInfo(){
            commentInfoApi({
                commentId:this.commentId
            }).then((res)=>{
                console.log(res)
                if(res.code===200){
                    this.userJudgeData=res?.data || null // 存储用户评价信息 + 回复信息
                    this.mpComment = res.data?.mpComment || {} // 存储用户评价信息
                    this.mpComment.publishTime = this.formatDateSE( this.mpComment.createTime)
                    // this.userJudgeData.commentsReplies.replyImages = res.data?.commentsReplies?.attachment.split(',')
                    this.mpComment.commentImages = res.data?.mpComment?.imageUrls.split(',') || []
                    this.replyData = res.data.commentsReplies // 存储回复数据
                    this.replyData.publishTime = this.formatDateSE( this.replyData.replyTime)
                }
            })
        }
    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.content-top {
    .tabs {
        margin-bottom: 12px;
        // 需修改 原来是20px
        padding-left: 10px;
        padding-right: 10px;
        height: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .white {

        .tab-item {
            font-size: 28rpx;
            // font-weight: bolder;
            color: #666666;
        }

        .tabbar-item {
            flex: auto;
            z-index: 1;
            text-align: center;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #111111;
            }
        }
    }
}

.main-container {
    background: #ffffff;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

}
// 背景图部分
.sur_box_bg {
	position: relative;
	// top: 0px;
	width: 100%;
	height: 427rpx;
    // background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);

	img {
		width: 100%;
		height: 427rpx;
	}
    .sur_box{
        width: 100%;
        height: 427rpx;
        background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);
    }

    .pageTopTitleContent{
        position: absolute;
        top: 221rpx;
        right: 69rpx;
        .pageTopTitle{
            font-size: 48rpx;
            text-align: right;
            color: #4E78D1;
            line-height: 48rpx;
        }
        .pageTopSubtitle{
            margin-top: 22rpx;
            border-radius: 15px;
            background: #4e78d1;
            font-size: 20rpx;
            line-height: 20rpx;
            text-align: right;
            color: #FFFFFF;
            padding: 5rpx 14rpx;
        }
    }
}
// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}
.card_bg{
    margin-left: 48rpx;
    margin-right: 48rpx;
    margin-top: -256rpx;
    z-index: 10;
    .pageTitle {
        font-weight: 500;
        font-size: 56rpx;
        text-align: left;
        color: #333;
        display: flex;
        align-items: center;
        img{
            width: 24rpx;
            height: 16rpx;
            line-height: 16rpx;
            margin-left: 24rpx
        }
    }
    .serviceStatusTime{
        margin-top: 24rpx;
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #666;
        line-height: 24rpx;
    }
}
// 服务描述
.service-desc-card {
    margin-top: 48rpx;
    padding: 40rpx 48rpx;
    width: calc(100% - 96rpx);
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 4rpx 16rpx #0000000f;

    .judgeTips {
        // padding-bottom: 24rpx;
        font-size: 32rpx;
        text-align: left;
        color: #333;
        // padding: 48rpx 0rpx 24rpx 0rpx;
        // font-size: 24rpx;
        // text-align: left;
        // color: #888888;
        // border-bottom: 1px solid #f9f9f9;
    }

    .uploadPic {
        margin-top: 24rpx;
        min-height: 190rpx;
    }

    .uploader {
        background-color: #f9f9f9;
        padding: 24px 12px;
        border-radius: 25px;
        border: 1px dashed #f9f9f9;
    }

    .text {
        font-size: 24rpx;
        color: #888888;
        line-height: 24rpx;
    }

    .custom-uploader {
        padding: 15px;
    }

    .upload-btn {
        width: 208rpx;
        height: 208rpx;
        border: 1px dashed #ddd;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        // background-color: #f0f0f0;
    }

    .upload-icon {
        width: 40rpx;
        height: 34rpx;
    }

    .upload-text {
        font-size: 20rpx;
        // line-height: 20rpx;
        color: #999999;
        margin-top: 8px;
        text-align: center;
    }

    // 服务人员对服务的描述的图
    .preview-list {
        display: flex;
        flex-wrap: wrap;
        // gap: 10px;
    }

    .preview-item {
        position: relative;
        // width:208rpx;
        // height: 208rpx;
        width:30%;
        margin-right: 18rpx;
        border-radius: 12rpx;
        overflow: hidden;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .preview-image {
        width: 100%;
        height: 100%;
    }

    .delete-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        line-height: 24px;
        border-radius: 0 0 0 8px;
    }
}

// 用户对服务的评价
.userComment {
    margin-top: 64rpx;

    .box_title {
        font-weight: 500;
        font-size: 36rpx;
        text-align: left;
        color: #333;
        line-height: 36rpx;
    }

    .userJudgeBox {
        padding: 40px 0px;
    }


    // 评价人的信息 时间
    // .user_judge_top {
    //     display: flex;
    //     flex-direction: column;

        .user_info {
            display: flex;
            margin-bottom: 32rpx;

            .user_img {
                height: 112rpx;
                line-height: 112rpx;

                img {
                    width: 112rpx;
                    height: 112rpx;
                    border-radius: 50%;
                }
            }
            .user_info_right {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 32rpx;

                .user_nicheng {

                    font-size: 36rpx;
                    line-height: 36rpx;
                    text-align: left;
                    color: #333333;
                    // margin-left: 13px;
                }
                // 星级模块
                .icon {
                    display: flex;
                    line-height: 20rpx;
                    // margin-top: 26rpx;
                    // padding: 0rpx 48rpx;
                }
            }



        }

    // }

    // 评价时间
    .user_judge_date {
        font-weight: 400;
        font-size: 24rpx;
        text-align: left;
        color: #999;
        // line-height: 24rpx;
        margin-top: 16rpx;
    }

    // 评价内容的文字
    .judge_item {
        color: #333333;
        font-size: 32rpx;
        text-align: left;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;

    }

    // 评价内容的三张图
    .judge_img {
        display: flex;
        width: 100%;
        align-items: center;
        margin-top: 24rpx;

        .judge_img_item {
            width: calc((100% - 46rpx) / 3);
            margin-right: 23rpx;
            border-radius: 12rpx;
        }

        .judge_img_item:last-child {
            margin-right: 0px;
        }

        img {
            width: 100%;
        }
    }

}
// 用户评价为空时
.userCommentEmpty{
    margin-top: 80rpx;
    font-weight: 400;
    font-size: 28rpx;
    text-align: center;
    color: #999;
    line-height: 28rpx;
}
// // 服务信息的card
// .card{
//     margin-top:48rpx ;
//     margin-bottom: 144rpx;
//     padding: 40rpx 48rpx;
//     width: calc(100% - 64rpx);
//     border-radius: 16rpx;
//     background: #fff;
//     box-shadow: 0 4rpx 16rpx #0000000f;

//     // 活动地址
//     .activityAddress {
//         display: flex;
//         align-items: center;
//         justify-content: space-between;

//         .itemRight {
//             width: 48rpx;
//             height: 48rpx;
//             text-align: center;
//             display: flex;
//             flex-direction: column;
//             justify-content: center;
//             align-items: center;
//         }
//         .itemLeft {
//             .activityDate {
//                 font-size: 36rpx;
//                 text-align: left;
//                 color: #333333;
//                 font-weight: bold;
//             }

//             .days {
//                 margin-top: 16rpx;
//                 font-size: 24rpx;
//                 width: 100%;
//                 color: #666666;
//                 white-space: nowrap;
//                 /* 防止文本换行 */
//                 overflow: hidden;
//                 /* 超出部分隐藏 */
//                 text-overflow: ellipsis;
//                 /* 显示省略号 */
//             }
//         }

//     }

//     // // 地图
//     // .map {
//     //     margin-top: 40rpx;
//     //     border-radius: 12rpx;
//     //     background: transparent;
//     //     border: 1rpx solid #e6e6e6;
//     // }

//     // 对应服务产品的信息  及用户信息
//     .serviceProductInfo{
//         .infoItem{
//             margin-top: 40rpx;
//             display: flex;
//             align-items: center;
//             width: 100%;
//             img{
//                 width: 112rpx;
//                 height: 112rpx;
//             }
//             .infoItemContent{
//                 margin-left: 32rpx;
               
//             }
//             .infoItemContent .label{
//                 font-weight: 400;
//                 font-size: 36rpx;
//                 text-align: left;
//                 color: #333;
//                 line-height: 36rpx;
//             }
//             .infoItemContent .text{
//                 font-weight: 400;
//                 font-size: 28rpx;
//                 text-align: left;
//                 color: #666;
//                 line-height: 28rpx;
//                 margin-top: 16rpx;
//             }
//             .phoneBox{
//                 display: flex; 
//                 align-items: center; 
//                 justify-content: space-between;
//                 width: calc(100% - (112rpx + 32rpx));
//             }
//         }
//     }
// }

// .serviceInfo {
//     background: #ffffff;
//     margin-top: 48rpx;
//     padding: 48rpx 32rpx;
// }

//商品标题
.goods_detail {
    width: 100%;
}

.text {
    color: #111111;
    font-size: 44rpx;
    text-align: left;
    line-height: 30px;
}

.ellipsis {
    -webkit-line-clamp: initial;
    max-height: none;
}

// .icon {
//     position: absolute;
//     right: 0px;
//     bottom: 0px;

//     img {
//         width: 11px;
//         height: 6px;
//     }
// }

// 标题
.title{
    font-size: 38rpx;
    text-align: left;
    color: #111111;
    line-height: 38rpx;
}



.goodsAction {

    #goodact {
        position: relative;
    }
   

}
textarea{
    min-height: 12px !important;
    line-height: 1.5 !important;
    color:#111111 !important;
}
.goods_act_box {
    position: relative;
    background-color: #ffffff;
    height: 72px;
}

.bottom{
    padding-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(env(safe-area-inset-bottom)) !important;
}

.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}

::v-deep .van-goods-action--safe {
    // padding-bottom: none !important;
}
::v-deep .van-goods-action-button__inner {
    font-weight: normal !important;
}
::v-deep .van-goods-action-icon {
   min-width:70rpx !important;
}
.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}


</style>
